<template>
  <div class="img-wrap article">
    <!-- <ul class="article-list">
      <li class="list-item" v-for="item in list" @click="goToPageOld(item)">
        <div class="img">
          <img :src="item.image" alt="" class="src">
        </div>
        <div class="des">{{item.intro}}</div>
      </li>
    </ul> -->
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__01.png" />
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__02.png" />
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__03.png" />
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__04.png" />
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__05.png" />
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__06.png" />
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__07.png" />
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__08.png" />
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__09.png" />
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jc2__10.png" />
    <!-- <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/2.png" @click="goToPage('2')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/3.png" @click="goToPage('3')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/4.png" @click="goToPage('4')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/5.png" @click="goToPage('5')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/6.png" @click="goToPage('6')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/7.png" @click="goToPage('7')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/8.png" @click="goToPage('8')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/list_03.jpg" @click="goToPage('a3')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/list_04.jpg" @click="goToPage('a2')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/list_05.jpg" @click="goToPage('a1')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/list_06.jpg" @click="goToPage('b2')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/list_07.jpg" @click="goToPage('b1')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/list_08.jpg" @click="goToPage('c3')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/list_09.jpg" @click="goToPage('c2')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/list_10.jpg" @click="goToPage('c1')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/list_02.jpg" @click="goToPage('d')">
    <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/article/list_11.jpg"> -->
  </div>
</template>
<script>
import { wxshare } from "common/mixin";
import { mapGetters, mapActions } from "vuex";
export default {
  mixins: [wxshare],
  data() {
    return {
      list: [],
    };
  },
  // methods: {
  //   ...mapActions({
  //     GetArticleList: "GetArticleList",
  //     GetArticleDetail: "GetArticleDetail",
  //   }),
  //   goToPage(name) {
  //     let path = `/article/${name}`;
  //     this.$router.push({ path: path });
  //   },
  //   goToPageOld(item) {
  //     this.GetArticleDetail({ id: item.id })
  //       .then((result) => {
  //         let path = `/detail/${item.id}?title=${item.title}`;
  //         this.$router.push({ path: path });
  //       })
  //       .catch(() => {});
  //   },
  // },
  // mounted() {
  //   this.GetArticleList({ keyword: 1 })
  //     .then((result) => {
  //       this.list = result.data.beanList;
  //     })
  //     .catch(() => {
  //       console.log(this.list);
  //     });
  // },
};
</script>
<style lang="less">
.article {
  .article-list {
    .list-item {
      display: flex;
      flex-direction: row;
      padding: 0 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #edeef3;
      .img {
        width: 100px;
        height: 80px;
        margin: 10px;
        img {
          vertical-align: top;
          width: 100%;
          height: 100%;
        }
      }
      .des {
        flex: 1;
        font-size: 18px;
        font-weight: bold;
        line-height: 30px;
        padding-left: 10px;
        max-height: 60px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-top: 10px;
      }
    }
  }
  img {
    vertical-align: top;
    display: block;
    width: 100%;
  }
}
</style>
